<template>
	<view class="container">
		<view class="darenlist">
			<view class="list" @click="DaRenInfo(item.ID)" v-for="item in List">
				<view class="headimg"><image :src="item.HeadImg"/></view>
				<view class="userinfo">
					<view class="nickname">{{item.NickName}}</view>
					<view class="funs"><view class="name">粉丝</view><view class="count">{{item.FunsCount}}</view><view class="distance">{{item.Distance}}</view></view>
					<view class="funs"><view class="name">获赞</view><view class="count">{{item.PraiseCount}}</view></view>
					<view class="brief">{{item.Brief}}</view>
				</view>		
				<view class="city">{{item.City}}</view>
			</view>
			<view class="nodata" v-if="NoData"></view>
			<view class="loadmore">{{Tip}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Tip:'正在加载...',
				Page:1,
				List:[],
				NoData:false,
				LoadMore:true,
				Keyword:'',
				Lat:0,
				Lng:0
			};
		},
		onLoad(options) {
			this.Keyword = options.Keyword;
			uni.getLocation({
			  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
			  success: res=> {
			    this.Lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
			    this.Lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。	
				this.Find_Pager();
			  }
			});
		},
		methods:{
			DaRenInfo(ID){
				uni.navigateTo({
					url:'/pages/darenku/darenkuinfo?ID='+ID
				})
			},
			Find_Pager(){
				var data={};
				data.Act="Find_Blogger";
				data.Page=this.Page;
				data.Lat = this.Lat;
				data.Lng = this.Lng;
				data.Keyword=this.Keyword;
				data.Limit=20;
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					this.List= this.List.concat(json.Data.List);
					uni.stopPullDownRefresh();
					if(json.Data.Count==0){
						this.NoData=true;
						this.Tip="没有搜索到任何达人信息";
					}
					else if(this.List.length>=json.Data.Count){
						this.LoadMore=false;
						this.Tip="我是有底线的";
					}
				});
			},
			Re_Load(){
				this.List=[];
				this.Page=1;
				this.NoData=false;
				this.LoadMore=true;
				this.Tip='正在加载...';
				this.Find_Pager();
			}
			
		}
	}
</script>

<style lang="scss">
	.darenlist{width:710rpx; height:auto; margin-left:20rpx; margin-top:25rpx; float:left;  z-index:1; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;
		.list{width:710rpx; height:240rpx; background-color: #ffffff; border-radius: 10rpx; padding:16rpx; margin-top:15rpx; display: flex; flex-direction: row; position: relative; overflow: hidden;
			.headimg{width:180rpx; height:180rpx; float:left; image{width:180rpx; height:180rpx; border-radius: 90rpx;}}
			.userinfo{flex:1; padding-left:20rpx; float:left; 
				.nickname{width:100%; height:46rpx; font-size:34rpx; font-weight: bold; margin-top:-5rpx; margin-bottom: 5rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
				.funs{width:100%; height:42rpx; display: flex; flex-direction: row; font-size:30rpx; .name{width:70rpx; color:#8f8d90;} .count{flex:1;} .distance{width:auto; color:#8f8d90;}}
				.brief{width:100%; height:75rpx; float:left; line-height: 34rpx; border-radius: 10rpx; padding-left:6rpx; padding-right: 6rpx; padding-top:6rpx; margin-top:8rpx; background-color: #fef7ed; color:#4f4f4f; font-size:28rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
			}
			.city{width:auto; height: 40rpx; line-height: 40rpx; padding-left:10rpx; padding-right: 10rpx; font-size:24rpx; position: absolute; top:0rpx; right: 0rpx; text-align: center; background-color: #ff5732; color: #ffffff; border-bottom-left-radius: 10rpx;}
			
		}
		.list:active{background-color: #dbdbdb;}
	}
</style>
